// 立即执行
// 柱状图——就业行情
(function () {
  // 实例化对象
  var myChart = echarts.init(document.querySelector('.left-bar .chart'));
  // 指定配置项和数据
  var option = {
    // 设置颜色
    color: ['#2f89cf'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    // 修改图标大小
    grid: {
      left: '0%',
      top: '10%',
      right: '0%',
      bottom: '4%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: [
          '旅游行业',
          '教育培训',
          '游戏行业',
          '医疗行业',
          '电商行业',
          '社交行业',
          '金融行业',
        ],
        axisTick: {
          alignWithLabel: true,
        },
        // 刻度值样式
        axisLabel: {
          color: 'rgba(255, 255, 255, .6)',
          fontSize: '10',
          interval: 0,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        // 刻度值样式
        axisLabel: {
          color: 'rgba(255, 255, 255, .6)',
          fontSize: '12',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
            width: 1,
          },
        },
        // y轴分割线样式
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
          },
        },
      },
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '40%',
        data: [99, 123, 200, 334, 390, 330, 220],
        itemStyle: {
          barBorderRadius: 5,
        },
      },
    ],
  };

  myChart.setOption(option);
  // 设置图表响应式
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();

// 柱状图——技能掌握
(function () {
  var myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6'];
  var myChart = echarts.init(document.querySelector('.right-bar .chart'));
  var option = {
    legend: {},
    grid: {
      top: '10%',
      left: '22%',
      bottom: '10%',
      containLabel: false,
    },
    xAxis: {
      show: false,
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        data: ['HTML5', 'CSS3', 'ES6', 'VUE', 'NODE'],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12,
        },
      },
      {
        type: 'category',
        data: ['702', '799', '360', '350', '702'],
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12,
        },
      },
    ],
    series: [
      {
        barCategoryGap: 50,
        barWidth: 10,
        type: 'bar',
        yAxisIndex: 0,
        data: [58, 79, 36, 68, 89],
        itemStyle: {
          barBorderRadius: 20,
          color: function (params) {
            return myColor[params.dataIndex];
          },
        },
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}%',
        },
      },
      {
        type: 'bar',
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
          color: 'none',
          borderColor: '#00c1de',
          borderWith: 3,
          barBorderRadius: 15,
        },
      },
    ],
  };

  myChart.setOption(option);

  // 设置图表响应式
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();

// 折现统计图——人员变化
(function () {
  var myChart = echarts.init(document.querySelector('.left-line .chart'));
  var yearData = [
    {
      year: '2021',
      data: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      ],
    },
    {
      year: '2022',
      data: [
        [123, 175, 101, 197, 121, 61, 98, 21, 23, 55, 68, 38],
        [143, 132, 165, 132, 178, 21, 88, 56, 22, 60, 18, 35],
      ],
    },
  ];
  var option = {
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis',
    },
    //  图例
    legend: {
      data: ['新增粉丝', '新增游客'],
      right: '10%',
      textStyle: {
        color: '#4c9bfd',
      },
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,
      borderColor: '#012f4a',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#4c9bfd',
        fontSize: 10,
        interval: 0,
        textStyle: {
          color: 'rgba(255, 2255, 255, .6)',
          fontSize: 12,
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 2255, 255, .2)',
        },
      },
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#4c9bfd',
      },
      axisLine: {
        show: false,
      },
      boundaryGap: false,
      splitLine: {
        lineStyle: {
          color: '#012f4a',
        },
      },
    },
    series: [
      {
        name: '新增粉丝',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: yearData[0].data[0],
      },
      {
        name: '新增游客',
        type: 'line',
        stack: 'Total',
        smooth: true,
        data: yearData[0].data[1],
      },
    ],
  };

  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
  // 切换数据
  $('.left-line h2').on('click', 'a', function () {
    var obj = yearData[$(this).index()];
    option.series[0].data = obj.data[0];
    option.series[1].data = obj.data[1];
    // 刷新报表数据
    myChart.setOption(option);
  });
})();

// 折现统计图播放量
(function () {
  var myChart = echarts.init(document.querySelector('.right-line .chart'));
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#dddc6b',
        },
      },
    },
    legend: {
      top: '0%',
      textStyle: {
        color: 'rbga(255, 255, 255, .5)',
        fontSize: '12',
      },
    },
    grid: {
      top: '30%',
      left: '10%',
      right: '10%',
      bottom: '10%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: [
          '01',
          '02',
          '03',
          '04',
          '05',
          '06',
          '07',
          '08',
          '09',
          '11',
          '12',
          '13',
          '14',
          '15',
          '16',
          '17',
          '18',
          '19',
          '20',
          '21',
          '22',
          '23',
          '24',
          '25',
          '26',
          '27',
          '28',
          '29',
          '30',
        ],
        axisLabel: {
          textStyle: {
            color: 'rgba(255, 255, 255, .6)',
            fontSize: 10,
            interval: 0,
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .2)',
          },
        },
      },
      {
        axisPointer: { show: false },
        axisLine: { show: false },
        position: 'bottom',
        offset: 20,
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
          },
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(255, 255, 255, .6)',
            fontSize: 12,
          },
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, .1)',
          },
        },
      },
    ],
    series: [
      {
        name: '播放量',
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#0184d5',
          width: 2,
        },
        areaStyle: {
          // 渐变色
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(1, 132, 213, 0.4)',
              },
              {
                offset: 0.8,
                color: 'rgba(1, 132, 213, 0.1)',
              },
            ],
            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
        },
        itemStyle: {
          color: '#0184d5',
          borderColor: 'rgba(221, 220, 107, .1)',
          borderWidth: 12,
        },
        symbol: 'circle',
        showSymbol: false,
        symbolSize: 5,
        emphasis: {
          focus: 'series',
        },
        data: [
          30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40, 30, 40, 30,
          40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40,
        ],
      },
      {
        name: '转发量',
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#00d887',
          width: 2,
        },
        label: {
          show: true,
          position: 'top',
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(0, 216, 135, 0.4)',
              },
              {
                offset: 0.8,
                color: 'rgba(0, 216, 135, 0.1)',
              },
            ],

            false
          ),
          shadowColor: 'rgba(0, 0, 0, 0.1)',
        },
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 5,
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#00d887',
          borderColor: 'rgba(221, 220, 107, .1)',
          borderWidth: 12,
        },
        data: [
          50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 40, 80, 30, 50, 60, 10,
          50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10, 40,
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();

// 饼图——年龄分布
(function () {
  var myChart = echarts.init(document.querySelector('.left-pie .chart'));
  var option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: '0%',
      itemWidth: 10,
      itemHeight: 10,
      data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
      textStyle: {
        color: 'rgba(255, 255, 255, .5)',
        fontSize: 12
      }
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '43%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 1,
        },
        label: {
          show: true,
        },
        labelLine: {
          show: true,
        },
        color: [
          '#065aab',
          '#066eab',
          '#0682ab',
          '#0696ab',
          '#06a0ab',
          '#06b4ab',
          '#06c8ab',
          '#06dcab',
          '#06f0ab'
        ],
        data: [
          { value: 735, name: '0岁以下' },
          { value: 580, name: '20-29岁' },
          { value: 484, name: '30-39岁' },
          { value: 300, name: '40-49岁' },
          { value: 300, name: '50岁以上' },
        ],
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();

// 饼图——地区分布
(function () {
  var myChart = echarts.init(document.querySelector('.right-pie .chart'));
  var option = {
    legend: {
      bottom: '0%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '10'
      }
    },
    series: [
      {
        name: '地区分布',
        type: 'pie',
        radius: ['10%', '70%'],
        center: ['50%', '46%'],
        roseType: 'radius',
        label: {
          fontSize: 10
        },
        // 线条
        labelLine: {
          length: 6,
          length2: 8
        },
        itemStyle: {
          borderRadius: 8
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: [
          '#006cff',
          '#60cda0',
          '#ed8884',
          '#ff9f7f',
          '#0096ff',
          '#9fe6b8',
          '#32c5e9',
          '#1d9dff'
        ],
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '深圳' },
          { value: 42, name: '广东' }
        ],
      }
    ]
  };
  myChart.setOption(option);
  window.addEventListener('resize', () => {
    myChart.resize();
  });
})();
